<template>
  <div class="preview-bg">
    <div class="preview-title">抖音卡片私信场景预览</div>
    <div class="phone-shell">
      <div class="phone-inner">
        <!-- 顶部模拟 -->
        <div class="phone-header">
          <img class="avatar" :src="defaultAvatar" />
          <span class="nickname">理想三旬</span>
          <el-icon class="v-icon"><CircleCheckFilled /></el-icon>
          <span class="phone-action">联系商家</span>
        </div>
        <!-- 卡片内容 -->
        <div class="msg-row">
          <div class="msg-avatar">
            <img class="avatar" :src="defaultAvatar" />
          </div>
          <div class="msg-card">
            <div
              class="msg-card-label"
              :class="{ 'no-padding': formData.icon }"
            >
              <template v-if="formData.icon">
                <img :src="formData.icon" class="label-img" />
              </template>
              <template v-else>
                在线咨询
              </template>
            </div>
            <div class="msg-card-content">
              <div class="msg-card-title">{{ formData.title || '卡片标题' }}</div>
              <div class="msg-card-desc">{{ formData.description || '卡片描述' }}</div>
            </div>
          </div>
        </div>
        <!-- 底部输入栏模拟 -->
        <div class="phone-footer">
          <el-input class="footer-input" placeholder="输入你的问题..." disabled />
          <el-icon class="footer-icon"><ChatDotRound /></el-icon>
          <el-icon class="footer-icon"><PictureFilled /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { CircleCheckFilled, ChatDotRound, PictureFilled } from '@element-plus/icons-vue'

const props = defineProps({
  formData: {
    type: Object,
    required: true
  }
})
const defaultAvatar = 'http://test.yudao.iocoder.cn/7e50e013db0d4eb79c95204b2f3452838d3cd294ebfab1a6e79e86e9b948c729.png'
</script>

<style scoped>
.preview-bg {
  background: #e9edfa;
  padding: 16px 0 0 0;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preview-title {
  color: #3a3a3a;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.phone-shell {
  background: #fff;
  border-radius: 36px;
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.10);
  width: 340px;
  height: 700px;
  padding: 16px 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.phone-inner {
  width: 308px;
  height: 668px;
  background: #f7f8fa;
  border-radius: 28px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.phone-header {
  display: flex;
  align-items: center;
  padding: 18px 16px 10px 16px;
  font-size: 15px;
  color: #222;
  border-bottom: 1px solid #ececec;
}
.phone-header .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}
.phone-header .nickname {
  font-weight: 500;
  margin-right: 4px;
}
.phone-header .v-icon {
  color: #409eff;
  font-size: 18px;
  margin-right: 8px;
}
.phone-header .phone-action {
  margin-left: auto;
  color: #409eff;
  font-size: 13px;
  cursor: pointer;
}
.msg-row {
  display: flex;
  align-items: flex-start;
  margin: 32px 0 0 16px;
}
.msg-avatar .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.msg-card {
  margin-left: 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  display: flex;
  align-items: stretch;
  min-width: 180px;
  max-width: 220px;
  padding: 0;
  overflow: hidden;
}
.msg-card-label {
  background: #ffb800;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  width: 56px;
  min-width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0 0 10px;
  text-align: center;
  padding: 0 10px;
  position: relative;
}
.msg-card-label.no-padding {
  padding: 0;
}
.label-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 0 0 10px;
  display: block;
}
.msg-card-content {
  padding: 12px 14px 12px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.msg-card-title {
  font-size: 16px;
  color: #222;
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.2;
  word-break: break-all;
}
.msg-card-desc {
  font-size: 14px;
  color: #888;
  line-height: 1.4;
  word-break: break-all;
}
.phone-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 12px 16px;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  border-radius: 0 0 28px 28px;
  border-top: 1px solid #ececec;
}
.footer-input {
  flex: 1;
  border-radius: 18px;
  background: #fff;
  border: none;
  font-size: 14px;
  margin-right: 8px;
}
.footer-icon {
  font-size: 22px;
  color: #bcbcbc;
  margin-left: 4px;
}
</style>
